<!-- 

 一. 概念
路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由器 路由

路由分为前端路由和后端路由

1).后端路由是由服务器端进行实现，并完成资源的分发
后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
2).前端路由是依靠hash值(锚链接)的变化进行实现
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

二.Vue Router
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

什么是单页面
	点击导航不会刷新页面 只是展示的组件切换
	整个应用只有一个页面
	数据需要通过ajax获取

单页面切换规则 
 路径变化 被  router监听    route规则  路径=>组件  进行展示
 
三.简单的使用路由 
3的版本适用于 vue2   4的版本适用于vue3

cnpm i  vue-router@3 -S   
1.在src里面创建一个文件夹 router 里面创建一个 index.js
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import HomeView from '../views/HomeView.vue'
	import AboutView from '../views/AboutView.vue'
	Vue.use(VueRouter)
	const routes = [
	  {
		path: '/',
		name: 'home',
		component: HomeView
	  },
	  {
		path: '/about',
		name: 'about',
		component: AboutView
	  }
	]
	const router = new VueRouter({
	  routes
	})
	export default router
2.在main.js 里面 使用 router
import router from './router'
new Vue({
  router,  
  render: h => h(App)
}).$mount('#app')

3.在页面中 使用  
 <div id="app">
    <nav>
      <router-link to="/"  active-class="on">Home</router-link> |
      <router-link to="/about"  active-class="on">About</router-link>
    </nav>
    <router-view/>
  </div>
	注意:   active-class="on" 是重新绑定 选中时的类名
	

4.几个注意点  
 ① 一般组件-通过标签去使用的组件  路由组件 -靠路由去切换使用的组件
 ② 切换掉的组件 去哪里了?被销毁了
 ③ 组件的实例对象里面 出现了 $route 当前组件的路由   $router 管理全局的路由器-只有一个
 
四.嵌套路由 
	
	①  配置路由的时候 谁的子路由 那么就在谁的route 写children
	const routes = [
	  {
		path: '/',
		name: 'home',
		component: HomeView
	  },
	  {
		path: '/about',
		name: 'about',
		component: AboutView,
		//注意子路由不要写 /
		children:[
			{
				path: 'news',
				name: 'home',
				component: HomeView
			},
			{
				path: 'news1',
				name: 'home',
				component: HomeView
			}
		]
	  }
	]
	② 页面的配置  注意 子路由的to必须带上父级  
	<div id="app">
	   <nav>
	     <router-link to="/home" >Home</router-link> |
	     <router-link to="/about">About</router-link>
	   </nav>
	   <router-view/>
	 </div>
	
	****重定向***
	{
		path:'/a',
		redirect:'/b'
	}
	当访问到a路由的时候  如果a路由没有对应的组件 那么 将a路由重定向到 b路由
	
	
五.命名路由
 原本的路由 路径复杂  home/news/title  ...
 
 路由的配置里面 加上一个 name router-link  to 的时候就直接使用 这个name 而不需要加上父级的路径
 {
 	path: 'recommed',
 	name: 'recommed',
 	component: Recommed
 },
 
 直接写 to 会理解为 path  使用name 必须使用 to对象写法
 <router-link to="recommed" active-class="on">推荐</router-link>  命令路由的错误写法
 
 <router-link :to="{name:'recommed'}" active-class="on">推荐</router-link> 命令路由的正确写法
 
 
 http://123.207.219.13:3003
 /banner
 
 
六.路由传参 
	1.query
	<router-link to="/about?id=111&title=你好">About</router-link>
	query传参?使用to字符串写法
	????
	query传参使用 to 对象的写法
	{
		path:...,
		query:{
			id:'',
			title:''
		}
	}
	接受参数  this.$route.query
	2.params 
	<router-link to="/about/11/你好">About</router-link>
	parms传参?使用to字符串写法
	???
	params传参使用 to 对象的写法
	有一个坑 这时候路径不能使用path
	{
		name:...,
		params{
			id:'',
			title:''
		}
	}
	
	路由的配置里面 修改
	{
		path: 'news1/:id/:title',
		name: 'home',
		component: HomeView
	}
	接受参数  this.$route.params

 
 

七.路由的props配置
如果需要使用传来的参数 this.$route 比较麻烦 用计算属性如果太多也麻烦

1.props的第一种写法 值为对象 该对象中所有的属性都会以props的形式 传给 接受参数的路由组件
 {
 	path: 'news1/:id/:title',
 	name: 'news1',
 	component: HomeView,
	props:{a:1,b:'hello'}
 }
 在组件里面 使用 props 接受传过来的参数  props:['a','b'] 这样的缺点就是 数据为死的不能是变量
 
2. props 的第二种 写法 值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传递给 路由组件
 {
 	path: 'news1/:id/:title',
 	name: 'news1',
 	component: HomeView,
 	props:true
 }
  在组件里面 使用 props 接受传过来的参数  props:['id','title'] 这样的就接受的路径传来的参数 缺点是不能接受query参数

3.props的第三种 写法  值为 函数
{
 	path: 'news1/:id/:title',
 	name: 'news1',
 	component: HomeView,
 	props($route){
		return {
			id:111,
			title:'hellow'
		}
	}
 }
使得组件里面结构更清晰 还能使用 结构继续简化

八.router-link的 replace属性

 push  一次一次的 放入 历史记录 
 replace 一次一次的替换 当前历史记录
 默认是 push模式 
 在router-link里面 加入 replace 开启 replace模式
 <router-link replace to="/about//11/你好">About</router-link> 



九.编程式路由导航
 全新的路由跳转方式  前面的跳转都是 基于 router-link
 this.$router.push({
	 name:'',
	 query:{
		 
	 }
 })
 this.$router.replace({
 	 name:'',
 	 query:{
 		 
 	 }
 })
 this.$router.back()
 this.$router.forward()
 this.$router.go()

十.路由缓存
	1.缓存所有组件
	<keep-alive>
		<router-view/>
	</keep-alive>
	2.缓存指定组件
	<keep-alive include='组件名'>
		<router-view/>
	</keep-alive>
	3.缓存多个组件
	<keep-alive include='组件名1,组件名2,组件名3'>
		<router-view/>
	</keep-alive>
	或者
	<keep-alive :include='[组件名1,组件名2,组件名3]'>
		<router-view/>
	</keep-alive>
	注意  组件名 就是   实例里面定义的  	name:'HomePage'
	4.两个新的 生命周期 
	 两个路由组件独有的生命周期 
	activated  当路由组件 激活
	deactivated 当路由组件 隐藏
十一.路由守卫 
	守卫某个路由 当满足某个状态才能访问 该路由  -其实就是一个权限的问题
	1.全局前置守卫  
		全局前置路由守卫  
			每次路由切换之前调用  第一次进入路由也会调用
			router.beforeEach((to,from,next)=>{
				//to 即将去那个路由  from 来自那个路由  next 调用该函数去到to路由
				判断to的路由是不是需要判断的路由
				判断当前状态是否 正常  正常则 调用 next()
			})
			这样写判断to的的 状态如果太多 将要写太多内容 所以最好配置一下
			可以直接在配置里面 加上权限 
			写在meta里面 可以写很多自己的配置 专门用来写自己的配置
		全局后置路由守卫
			每次路由切换之前调用  第一次进入路由也会调用
			router.afterEach((to,from)=>{
				//to 即将去那个路由  from 来自那个路由 
				//没有next 因为已经切换完毕了
				//用的比较少 例如 切换页面改变 title
			})
    2.独享路由守卫-只有前置没有后置路由守卫
		1配置在 路由里面  
		{
			path: 'album',
			name: 'album',
			component: () => import('@/page/find_music/model/FindAlbum.vue'),
			beforeEnter(to,from,next) {
				//to 即将去那个路由  from 来自那个路由  next 调用该函数去到to路由
				判断to的路由是不是需要判断的路由
				判断当前状态是否 正常  正常则 调用 next()
			}
		}
	3 组件内路由守卫
		 组件内守卫
		进入守卫之前
		beforeRouteEnter(to,from,next){
			
		}
		离开守卫之前
		beforeRouteLeave(to,from,next){
			
		}
	十二. 路由模式history和 哈希的区别
	#后面的内容不会传递到服务器
	mode:'history'
	
	
	区别   
		hash在地址栏会有#  history没有
		hash 优点兼容性好    history  兼容性差一点
		 #    打包之后不会因为路径出错
		 history 打包之后刷新页面因为路径出错  
		 history模式打包之后怎么解决?必须找后台解决
 -->
